import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'amfe-flexible'
import { Button, NavBar, Toast, Form, Field, Tabbar, TabbarItem, Icon, Tab, Tabs, Cell, CellGroup, List, PullRefresh, ActionSheet, Popup, Row, Col, Badge, Search, Divider, Tag, Image } from 'vant'
import directiveObj from './utils/directive'

// 全局注册Button组件
/* 全都注册--全都引入然后一并注册多个组件
全局注册--引入某一个，注册后，整个项目任意地方都能直接使用标签 */
Vue.use(Button)
Vue.use(NavBar)
Vue.use(Toast)
Vue.use(Form)
Vue.use(Field)
Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(Icon)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(List)
Vue.use(PullRefresh)
Vue.use(ActionSheet)
Vue.use(Popup)
Vue.use(Row)
Vue.use(Col)
Vue.use(Badge)
Vue.use(Search)
Vue.use(directiveObj)
Vue.use(Divider)
Vue.use(Tag)
Vue.use(Image)
// Vue.use()中间件函数, 调用()里对象的install方法
// Vue.use(), 调用()里函数本身或者install方法
// install方法里 Vue.component('van-button', 组件内对象)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

/*
目标1: 引入vant组件库, 使用
1. 下载vant组件库 (yarn add vant)
2. 自动按需引入到工程, 需要一个插件 (yarn add babel-plugin-import -D)
3. babel.config.js里, 填入文档上配置(复制) - 重启服务器
4. main.js - 引入vant组件 - 全局注册
5. 任意.vue组件内, 使用van-开头的全局组件
*/

/*
目标2：对axios进行二次封装
  封装内容可以有：
    拦截器统一判断http状态码
    拦截器修改请求头/参数格式...
*/

/*
目标3: 移动端适配
思路: vant组件库以及我们自己写px单位, 都变成rem
1. html的font-size(单位px), 值(flexible.js)
flexible.js (获取html的宽度 / 10)
2. 找一个基准
参照iphone6机型来还原我们的设计图
375px宽度, 所以iphone6机型下,375/10 -> html的font-size: 37.5px;
3. 把除了html以外子标签们, (px单位换成rem单位)
例如: 我在iphone6设计图上(1:1), 量出宽度200的图片
设置img标签的宽度为200px / 37.5
(1): 拿计算器
(2): px to rem插件
(3): 工程化(yarn管理包, webpack分析编译代码-集成功能)
webpack+postcss+postcss-pxtorem
打包时, 帮我把所有style里(标签里的它不管)px单位, 转成rem单位

步骤:
1. 下载postcss postcss-pxtorem@5.1.1 amfe-flexible
2. postcss.config.js -> 填入文档的配置
3. main.js 引入flexible.js
*/
